<template>
	<view class="root_box">
		<view class="first_aid_box">
			<map name="first_aid" class="first_aid_map" :latitude="latitude" :longitude="longitude"></map>
		</view>

		<view class="service-container">
			<view class="tab-bar">
				<view v-for="item in services" :key="item.value" class="tab-item"
					:class="{ 'active': activeTab === item.value }" @click="switchTab(item.value)">
					{{ item.label }}
				</view>
			</view>

			<!-- 内容区域 -->
			<view class="content-panel">
				<view v-show="activeTab === '1'" class="content-item">
					<view class="form-container">
						<!-- 位置输入 -->
						<view class="input-item">
							<text class="input-label">位置:</text>
							<input class="input-box" v-model="startaddr" placeholder="请输入详细地址" />
						</view>

						<!-- 求助人输入 -->
						<view class="input-item">
							<text class="input-label">求助人:</text>
							<input class="input-box" v-model="helper" placeholder="请输入姓名" />
						</view>

						<!-- 联系方式 -->
						<view class="input-item">
							<text class="input-label">联系方式:</text>
							<input class="input-box" v-model="phone" type="number" placeholder="请输入手机号" />
						</view>

						<!-- 车牌 -->
						<view class="input-item">
							<text class="input-label">车牌:</text>
							<input class="input-box" v-model="carId" placeholder="请输入车牌号" />
						</view>
					</view>
				</view>
				<view v-show="activeTab === '2'" class="content-item">
					<view class="form-container">
						<!-- 位置输入 -->
						<view class="input-item">
							<text class="input-label">位置:</text>
							<input class="input-box" v-model="startaddr" placeholder="请输入详细地址" />
						</view>

						<!-- 求助人输入 -->
						<view class="input-item">
							<text class="input-label">求助人:</text>
							<input class="input-box" v-model="helper" placeholder="请输入姓名" />
						</view>

						<!-- 联系方式 -->
						<view class="input-item">
							<text class="input-label">联系方式:</text>
							<input class="input-box" v-model="phone" type="number" placeholder="请输入手机号" />
						</view>

						<!-- 车牌 -->
						<view class="input-item">
							<text class="input-label">车牌:</text>
							<input class="input-box" v-model="carId" placeholder="请输入车牌号" />
						</view>
					</view>
				</view>
				<view v-show="activeTab === '3'" class="content-item">
					<view class="form-container">
						<view class="input-item">
							<text class="input-label">起点:</text>
							<input class="input-box" v-model="startaddr" placeholder="请选择起点"  @click="chooseStarAddr"/>
						</view>
						<view class="input-item">
							<text class="input-label">终点:</text>
							<input class="input-box" v-model="endaddr" placeholder="请选择终点"  @click="chooseEndAddr"/>
						</view>
						<view class="input-item">
							<text class="input-label">救助人:</text>
							<input class="input-box" v-model="helper" />
						</view>
						<view class="input-item">
							<text class="input-label">联系方式:</text>
							<input class="input-box" v-model="phone" />
						</view>
						<view class="input-item">
							<text class="input-label">车型:</text>
							 <picker 
							      mode="selector" 
							      :range="carTypes" 
							      :range-key="'label'"
							      @change="handlePickerChange"
							    >
							      <view class="picker">
							        {{ selectedLabel || '请选择车型' }}
							      </view>
							    </picker>
						</view>

					</view>
				</view>
			</view>

		</view>
		
		<view class="bottom_box" >
			<view style="margin-left: 15rpx;">警务求助</view>
			<view class="get_help_teg">
				<view class="get_help_teg_item">
					<text class="get_help">交通事故</text>
					<text class="help_number">122</text>
				</view>
				<view class="get_help_teg_item">
					<text class="get_help">火警</text>
					<text class="help_number">119</text>
				</view>
				<view class="get_help_teg_item">
					<text class="get_help">急救中心</text>
					<text class="help_number">120</text>
				</view>
				<view class="get_help_teg_item">
					<text class="get_help">公安报警</text>
					<text class="help_number">110</text>
				</view>
			</view>
			<button class="emergency-btn" @click="CallForHelp">呼叫救援</button>
				
		</view>
						<text class="aid_log" @click="enterLogPage">救援记录></text>




	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import request from'../../utils/request.js';
	
	import "@/utils/qqmap-wx-jssdk.min.js";
	const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
	
	var qqmapsdk = new QQMapWX({
		key: 'JM5BZ-DP3KC-ZRY2F-AMLUB-MNFOT-BSBG6' // 必填
	});

	var latitude = ref(0)
	var longitude = ref(0)
	const activeTab = ref('1')
	const services = [{
			value: '1',
			label: '搭电'
		},
		{
			value: '2',
			label: '换胎'
		},
		{
			value: '3',
			label: '拖车'
		}
	]
	const switchTab = (tab) => {
		activeTab.value = tab
	}
	const address=ref("")
	const helper=ref("")
	const phone=ref("")
	const carId=ref("")
	const startaddr=ref("")
	const endaddr=ref("")
	const cartype=ref(0)
	const startinfo=ref("")
	const endinfo=ref("")	

const carTypes = reactive([
  { label: '宝马', value: 1 },
  { label: '奔驰', value: 2 },
  { label: '比亚迪', value: 3},
  { label: '奥迪', value: 5 },
  { label: '劳斯莱斯', value: 8},
  { label: '特斯拉', value: 7 },
  
  // 可继续添加其他车型...
]);

// 显示用的选项数组（只需要label）
const carOptions = carTypes.map(item => item.label);

// 选中的值

const selectedLabel = ref('');

// 处理选择事件
const handlePickerChange = (e) => {
  const index = e.detail.value;
  cartype.value = carTypes[index].value;
  selectedLabel.value = carTypes[index].label;
  
  // 实际使用时可以访问 selectedValue 获取真实值
  console.log('选中值:', cartype.value);
};

	onMounted(() => {
		getuser();
		getLocal();
	})

	function getLocal() {
		uni.getLocation({
			type: "wgs84",
			success: function(res) {
				console.log(res)
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				longitude.value = res.longitude;
				latitude.value = res.latitude;
				
			},
			fail: function(err) {
				console.error('获取位置失败：', err);
			}
		});
		uni.getLocation({
			type: 'gcj02', //腾讯地图
			success:(res)=>{
				qqmapsdk.reverseGeocoder({
					location: {
				latitude: latitude.value,
				longitude: longitude.value
				},
				success:(res)=>{
					console.log(res.result.address, 'rrr');
					startaddr.value=res.result.address
				},
				fail:(e)=>{
					console.log("错误信息:",e)
				}
				})
			}
		})
	}
	
	const userId=ref(0)
	function getuser(){
		uni.getStorage({
		    key: 'userId',
		    success: function (res) {
		        console.log('获取的数据:', res);
				userId.value=res.data
				console.log(userId.value)
				
		    },
		    fail: function (err) {
		        console.error('获取数据失败', err);
		    }
		});
		
	}
	
	function CallForHelp(){
		getTime()
		console.log(currentTime.value)
	console.log(userId.value,cartype.value,activeTab.value,carId.value,phone.value,startaddr.value,helper.value,endaddr.value,currentTime.value)
		request({
			url:"/gmh/emergencyRescueRecords/insert",
			method:"post",
			data:{
				rescue_number:"",
				status:0,
				userId:userId.value,
				vehicleType:cartype.value,
				rescueType:activeTab.value,
				licensePlate:carId.value,
				contactInfo:phone.value,
				startingLocation:startaddr.value,
				requesterName:helper.value,
				endingLocation:endaddr.value,
				createdAt:currentTime.value,
				merchantId:0
			}
		}).then(res=>{
			console.log(res)
		}).catch(err=>{
			console.log(err)
		})
		
		
		
	}
	function chooseStarAddr(){
		uni.chooseLocation({
			success: (res) => {
				console.log("选择位置")
				console.log(res)
			startaddr.value=res.address
			startinfo.value=res
			console.log(startinfo)
			}
		})
	}
	function chooseEndAddr(){
		uni.chooseLocation({
			success: (res) => {
				console.log("选择位置")
				console.log(res)
				endaddr.value=res.address
				endinfo.value=res
				console.log(endinfo.value)
			}
		})
	}

	
	function enterLogPage(){
		uni.navigateTo({
			//救援记录
			url:'/pages/work/aidLog/aidLog'
			// url:'/pages/gmh/nearby_stores/nearby_stores'
		})
	}
	
	//获取当前时间
	const currentTime = ref('')
	const getTime = () => {
	  const now = new Date()
	  currentTime.value = now.toLocaleString('zh-CN', { 
	    hour12: false,
	    timeZone: 'Asia/Shanghai'
	  })
	}
	
</script>

<style scoped>
	.first_aid_box {
		width: 100vw;
		height: 33vh;

	}

	.first_aid_map {
		width: 100%;
		height: 100%;
	}

	.tag_info {
		margin-top: 10px;
		padding-left: 70rpx;
		padding-right: 70rpx;
		text-align: center;
		display: flex;
		justify-content: space-around;

	}

	.tag_info view {
		font-weight: 600;
		margin-left: 10px;
		padding: 0.625rem;
	}


	.service-container {
		flex: 1;
		padding: 20rpx;
	}

	/* 选项卡样式 */
	.tab-bar {
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;
	}

	.tab-item {
		padding: 15rpx 40rpx;
		font-size: 28rpx;
		color: #666;
		border-bottom: 4rpx solid transparent;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #FF3A3A;
		border-bottom-color: #FF3A3A;
		font-weight: 500;
	}

	/* 内容区域 */
	.content-panel {
		background-color: #f8f8f8;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.content-item {
		font-size: 28rpx;
		color: #333;
		line-height: 1.2;
	}

	/* 淡入动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.content-item {
		animation: fadeIn 0.3s ease-in;
	}


	/* 搭电输入框 */
	.form-container {
		padding: 10rpx;
		background: #fff;
		border-radius: 12rpx;
	}

	/* 输入项间距 */
	.input-item {
		margin-bottom: 24rpx;
		display: flex;
	}

	/* 输入标签样式 */
	.input-label {
		display: block;
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 16rpx;
	}

	/* 输入框样式 */

	.input-box {
		width: 75%;
		height: 50rpx;
		padding: 0 24rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		background: #fff;
	}

	/* 输入框聚焦状态 */
	.input-box:focus {
		border-color: #007AFF;
		outline: none;
	}

	/* 占位符颜色 */
	.input-box::placeholder {
		color: #999;
	}
	
	.bottom_box{
		padding: 10rpx;
	}
	.get_help_teg{
		display: flex;
		padding: 15rpx;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	.get_help_teg_item{
		width: 350rpx;
		height: 30px;
		/* background-color: pink; */
		line-height: 30px;
	}
	.help_number{
		color: #007AFF;
		float: right;
		font-size: 12px;
		margin-right: 20rpx;
		}
		.get_help{
			font-size: 12px;
		}
		
	.emergency-btn {
	  /* 基础样式 */
	  display: inline-block;
	/*  padding: 20rpx 40rpx; */
	  border: none;
	  border-radius: 12px; /* 圆角半径 */
	  width: 500rpx;
	margin-left: 125rpx;
	  
	  /* 颜色配置 */
	  background-color: #FF6B00; /* 橙色色值 */
	  color: white;
	  
	  /* 文字样式 */
	  font-size: 16px;
	  font-family: Arial, sans-serif;
	  font-weight: bold;
	  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
	  
	  /* 交互效果 */
	  cursor: pointer;
	  transition: background-color 0.2s;
	  
	  /* 阴影效果 */
	  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	}
	
	/* 悬停状态 */
	.emergency-btn:hover {
	  background-color: #FF5500; /* 更深的橙色 */
	}
	
	/* 点击状态 */
	.emergency-btn:active {
	  transform: translateY(2px);
	  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	}	
		
		.aid_log{
			display: block;
			margin-bottom: 60px;
			font-size: 14px;
			color: #007AFF;
			width: 100vw;
			text-align: center;
		}
</style>